/*
  学习目标：React更新机制
  1. 默认情况下：父组件更新，所有的后代组件全部更新
  2. 不会影响兄弟组件
*/

import React from 'react';
export default class App extends React.Component {
  state = {
    count: 0,
  };

  render() {
    return (
      <div>
        <h1>数量： {this.state.count}</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          点我修改数量
        </button>

        <Son></Son>
        <Child></Child>
      </div>
    );
  }
}

class Child extends React.Component {
  componentDidUpdate() {
    console.log('Child组件更新了');
  }
  render() {
    return <div>我是Child</div>;
  }
}

class Son extends React.Component {
  state = {
    msg: '我是Son的msg',
  };
  componentDidUpdate() {
    console.log('Son组件更新了');
  }
  render() {
    return (
      <div>
        我是Son - {this.state.msg}
        <button onClick={() => this.setState({ msg: this.state.msg + '~' })}>
          点我修改Son组件的msg
        </button>
        <GrandSon></GrandSon>
      </div>
    );
  }
}

class GrandSon extends React.Component {
  componentDidUpdate() {
    console.log('GrandSon组件更新了');
  }
  render() {
    return <div></div>;
  }
}
